import React from 'react'
import Square from './Square'
import './Game.css'

class Board extends React.Component {
    constructor(props){
        super(props);
        this.state={
            squares: Array(36).fill(null),
            xIsNext: true,
            currentStepIndex:-1
        }

        this.handleClick = this.handleClick.bind(this);
        this.handleReloadClick = this.handleReloadClick.bind(this);
    }

    handleReloadClick(){
      this.setState({
        squares: Array(36).fill(null),
        xIsNext: true,
        currentStepIndex:-1
    });
    }
    handleClick(index){
      const squares = this.state.squares.slice();
      if(squares[index] === null){
        squares[index] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            squares: squares,
            xIsNext: !this.state.xIsNext,
            currentStepIndex:index,
            winStatus:false
        });
      }
    }

    renderSquare(i) {
      return <Square 
                value={this.state.squares[i]}
                onClick={ () => this.handleClick(i) }/>;
    }
    
    renderLine(start, end){
      const elements = [];
      for(let i = start; i < end + 1; i ++){
        elements.push(i);
      }      
      return (
        elements.map(i => {
            return this.renderSquare(i);
          })
        );
    }

    calcuateWinner(squares) {
      const currentIndex = this.state.currentStepIndex;
      
      if(currentIndex === -1) return false;
      let lines = [
        [currentIndex, currentIndex + 1, currentIndex + 2],
        [currentIndex, currentIndex - 1, currentIndex + 1],
        [currentIndex, currentIndex - 1, currentIndex - 2],
        [currentIndex, currentIndex - 5, currentIndex - 10],
        [currentIndex, currentIndex - 5, currentIndex + 5],
        [currentIndex, currentIndex - 5, currentIndex - 10],
        [currentIndex, currentIndex - 6, currentIndex - 12],
        [currentIndex, currentIndex - 6, currentIndex + 6],
        [currentIndex, currentIndex + 6, currentIndex + 12],
        [currentIndex, currentIndex - 7, currentIndex - 14],
        [currentIndex, currentIndex - 7, currentIndex + 7],
        [currentIndex, currentIndex - 7, currentIndex - 14]
      ];
      
      let winStatus = false;

      for(let i = 0; i < lines.length; i ++) {
        const [a, b, c] = lines[i];
        const ac = a >= 0 && a <= 35;
        const bc = b >= 0 && b <= 35;
        const cc = c >= 0 && c <= 35;
        if(ac && bc && cc) {
          if(squares[a] && squares[a] === squares[b] && squares[b] === squares[c]) {
            winStatus = true;
              break;
          }
        }
      }
      return winStatus;
    }

    checkRange(index, range) {
      return index > range[0] && index < range[1];
    }

    render() {
      
      let status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
      status = this.calcuateWinner(this.state.squares) ? 'Winner' : status;

      return (
        <div>
          <div className="status">
          {status}
         <input className='input' type='button' value='reload...' onClick={this.handleReloadClick}/>
          </div>
          
          <div className="board-row">
          {this.renderLine(0, 5)}
          </div>
          
          <div className="board-row">
          {this.renderLine(6, 11)}
          </div>
          <div className="board-row">
          {this.renderLine(12, 17)}
          </div>
          <div className="board-row">
          {this.renderLine(18, 23)}
          </div>
          <div className="board-row">
          {this.renderLine(24, 29)}
          </div>
          <div className="board-row">
          {this.renderLine(30, 35)}
          </div>
        </div>
      );
    }
  }

export default Board